import { motion } from 'framer-motion';
import { ShareAltOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';

export const PromotionPage = () => {
  const promotions = [
    {
      id: 1,
      title: '分享照片赢好礼',
      description: '分享你的照片到朋友圈，获得精美礼品',
      icon: <ShareAltOutlined className="text-2xl" />,
      color: 'from-blue-500 to-purple-500'
    },
    {
      id: 2,
      title: '点赞抽奖',
      description: '为喜欢的照片点赞，参与抽奖活动',
      icon: <LikeOutlined className="text-2xl" />,
      color: 'from-pink-500 to-red-500'
    },
    {
      id: 3,
      title: '收藏有礼',
      description: '收藏喜欢的照片，获得专属优惠',
      icon: <StarOutlined className="text-2xl" />,
      color: 'from-yellow-500 to-orange-500'
    }
  ];

  return (
    <div className="min-h-full pt-4">
      <div className="container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="space-y-6"
        >
          {/* 标题区域 */}
          <div className="text-center">
            <h1 className="text-2xl font-bold text-gray-800 mb-2">照片打印</h1>
            <p className="text-gray-600">选择您喜欢的照片，立即打印</p>
          </div>

          {/* 功能卡片区域 */}
          <div className="grid grid-cols-2 gap-4">
            <motion.div
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              className="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow"
            >
              <div className="aspect-square bg-gray-100 rounded-lg mb-3"></div>
              <h3 className="font-medium text-gray-800">证件照</h3>
              <p className="text-sm text-gray-500">一寸、二寸照片打印</p>
            </motion.div>

            <motion.div
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              className="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow"
            >
              <div className="aspect-square bg-gray-100 rounded-lg mb-3"></div>
              <h3 className="font-medium text-gray-800">生活照</h3>
              <p className="text-sm text-gray-500">6寸照片打印</p>
            </motion.div>
          </div>

          {/* 优惠信息 */}
          <div className="bg-gradient-to-r from-purple-500 to-blue-500 rounded-xl p-4 text-white">
            <h3 className="font-bold mb-2">限时优惠</h3>
            <p className="text-sm opacity-90">首次打印享受 8 折优惠</p>
          </div>

          {/* 使用说明 */}
          <div className="bg-white rounded-xl p-4">
            <h3 className="font-medium text-gray-800 mb-3">使用说明</h3>
            <ul className="space-y-2 text-sm text-gray-600">
              <li className="flex items-center">
                <span className="w-5 h-5 rounded-full bg-purple-100 text-purple-500 flex items-center justify-center mr-2">1</span>
                选择照片类型
              </li>
              <li className="flex items-center">
                <span className="w-5 h-5 rounded-full bg-purple-100 text-purple-500 flex items-center justify-center mr-2">2</span>
                拍摄或上传照片
              </li>
              <li className="flex items-center">
                <span className="w-5 h-5 rounded-full bg-purple-100 text-purple-500 flex items-center justify-center mr-2">3</span>
                选择打印数量
              </li>
              <li className="flex items-center">
                <span className="w-5 h-5 rounded-full bg-purple-100 text-purple-500 flex items-center justify-center mr-2">4</span>
                完成支付
              </li>
            </ul>
          </div>
        </motion.div>
      </div>
    </div>
  );
}; 